<template>
  <view class="songs_container">
    <view class="header">
      <icon type="search" size="14"></icon>
      <uni-easyinput focus v-model="keyValue" placeholder="搜索歌曲" trim="all" @input="handleInput" :clearable="false" placeholderStyle="font-size:28rpx" ref="uinputRef"></uni-easyinput>
      <text @click="handleSearch">搜索</text>
    </view>
    <template v-if="searchSongs.length > 0">
      <view class="search_container_info">
        <view class="search_container" v-for="(item, i) in searchSongs" :key="i" @click="submitSearchKey(item.keyword)">
          <icon type="search" size="14"></icon>
          <text>{{ item.keyword }}</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="history_record" v-if="historyRecord.length > 0">
        <view class="history">
          <text>历史</text>
          <text class="iconfont icon-shanchu-copy" @click="clearHistory"></text>
        </view>
        <view class="history_container">
          <view v-for="(item, i) in historyRecord" :key="i" class="hhh">
            <text @click="submitSearchKey(item)">{{ item }}</text>
          </view>
        </view>
      </view>
      <scroll-view scroll-x scroll-y class="scroll_search" enable-flex>
        <view class="hot_search">
          <text class="text">热搜榜</text>
          <view class="hot_serach_container">
            <view class="wyf" v-for="(item, i) in hotSearch" :key="i">
              <text>{{ i + 1 }}</text>
              <text @click="submitSearchKey(item.searchWord)">{{ ' ' + item.searchWord }}</text>
              <image v-if="item.iconUrl" :src="item.iconUrl" style="width: 40rpx; height:25rpx;vertical-align: middle; margin-left:10rpx"></image>
            </view>
          </view>
        </view>
        <view class="topic_List">
          <text class="text">话题榜</text>
          <view class="hot_topic_container">
            <view class="wyf" v-for="(item, i) in hotTopic" :key="i">
              <text>{{ i + 1 }}</text>
              <text @click="submitSearchKey(item.title)">{{ ' ' + item.title }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      hotSearch: [],
      hotTopic: [],
      keyValue: '',
      searchSongs: [],
      timer: '',
      historyRecord: []
    }
  },
  computed: {
    ...mapState(['historyRecords'])
  },
  onLoad() {
    this.gethotSearch()
    this.gethotTopic()
    this.historyRecord = this.historyRecords
    // setTimeout(()=>{
    //   this.$refs.uinputRef.focus()
    // },1000)
    
  },
  methods: {
    ...mapMutations(['UpdateSearchRecord']),
    async gethotSearch() {
      const { data: res } = await uni.$http.get('search/hot/detail')
      // console.log(res)
      if (res.code !== 200) return uni.showMsg('热搜榜获取失败')
      this.hotSearch = res.data
    },
    async gethotTopic() {
      const { data: res } = await uni.$http.get('hot/topic')
      // console.log(res)
      if (res.code !== 200) return uni.showMsg('话题榜获取失败')
      this.hotTopic = res.hot
    },
    handleInput() {
      if (!this.keyValue) {
        this.searchSongs = []
        return ''
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getSerachSongs()
      }, 1000)
    },
    // 搜索歌曲的函数
    async getSerachSongs() {
      const { data: res } = await uni.$http.get('search/suggest', { keywords: this.keyValue, type: 'mobile' })
      // console.log(res)
      if (res.code === 200) {
        this.searchSongs = res.result.allMatch
      }
    },
    handleSearch() {
      if (this.keyValue) {
        this.historyRecords.unshift(this.keyValue)
        const [...set] = new Set(this.historyRecords)
        // console.log(set);
        this.UpdateSearchRecord(set)
        this.historyRecord = this.historyRecords
        uni.navigateTo({
          url: '/subpkg/allInfo/allInfo?key=' + this.keyValue
        })
        this.keyValue = ''
        this.searchSongs=[]
      }
    },
    clearHistory() {
      uni.showModal({
        content: '确定清除全部历史记录',
        confirmText: '清空',
        cancelColor: '#fe3a3b',
        confirmColor: '#fe3a3b',
        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('historysearch')
            this.historyRecord = []
            this.UpdateSearchRecord([])
          }
        }
      })
    },
    submitSearchKey(key) {
      this.keyValue = key
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll_search {
  display: flex;
  white-space: nowrap;
  height: calc(100vh - 100rpx);
}
.songs_container {
  background-color: #f7f7f7;
  height: 100%;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  height: 100rpx;
}
/deep/ .uni-easyinput .uni-easyinput__content {
  margin: 0 auto;
  width: 95%;
  height: 30%;
  // background-color: #f7f7f7 !important;
  color: #747591;
  font-size: 30rpx;
  border-radius: 15rpx;
  margin-top: 20rpx;
  transform: translateX(-30rpx);
  background-color: #747591;
}
/deep/ .uni-easyinput__content input {
  padding-left: 80rpx !important;
}
.header icon {
  transform: translate(50rpx, 10rpx);
  z-index: 2;
}
.header text {
  transform: translate(-30rpx, 10rpx);
}
.history_record {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.history {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
}
.history text {
  font-size: 30rpx;
  font-weight: 550;
}
.iconfont {
  width: 50rpx;
  height: 50rpx;
  transform: translateX(30rpx);
}
.history_container {
  display: flex;
  flex-wrap: wrap;
}
.hhh {
  margin: 20rpx;
}
.history_container text {
  border-radius: 10rpx;
  background: linear-gradient(45deg, #dcdbfb, #e6dbfd, #f1d9f3);
  font-size: 28rpx;
  margin: 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot_search,
.topic_List {
  display: flex;
  flex-direction: column;
  background-color: #fefefe;
  min-width: 60%;
  border-radius: 20rpx;
  margin: 0 20rpx 50rpx 20rpx;
  height: 120%;
}
.hot_search .text,
.topic_List .text {
  height: 50rpx;
  width: 400rpx;
  margin: 20rpx 20rpx 5rpx 20rpx;
  font-weight: 560;
  vertical-align: middle;
}
.hot_serach_container,
.hot_topic_container {
  border-top: 5rpx solid #f7f7f7;
  
}
.wyf {
  margin: 30rpx;
  font-size: 30rpx;
}
.search_container_info {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
.search_container {
  display: flex;
  border-top: 5rpx solid #f7f7f7;
  font-size: 25rpx;
  align-items: center;
}
.search_container icon {
  margin: 0 20rpx;
}
.search_container text {
  margin: 30rpx 0;
}
</style>
